<script setup lang="ts">
import { RouterView } from 'vue-router'
import Topbar from '@/components/topbar/Topbar.vue'
import Bottombar from '@/components/bottombar/Bottombar.vue'
import { useRoute } from 'vue-router'
import { onBeforeUnmount, onMounted } from 'vue'
import { stopCommandApi } from './service/api'

const route = useRoute()

function unloadFn() {
  stopCommandApi()
}
onMounted(() => {
  window.addEventListener('beforeunload', unloadFn)
})
onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', unloadFn)
})
</script>

<template>
  <div class="app-container">
    <div class="topbar" v-show="route.meta?.showTopbar ?? false">
      <Topbar />
    </div>

    <div class="main">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></component>
        </keep-alive>
        <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"></component>
      </router-view>
    </div>

    <div class="bottombar" v-show="route.meta?.showBottombar ?? false">
      <Bottombar />
    </div>
  </div>
</template>

<style lang="less">
.app-container {
  display: flex;
  // min-height: calc(100vh + 112px);
  min-height: 100vh;
  flex-direction: column;

  .topbar {
    position: fixed;
    top: 0;
    z-index: 1500;
  }

  .main {
    flex: 1;
    padding-top: 112px;
  }
}
</style>
